<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建快速定制</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<style>
    /*.page1{*/
        /*display: none;*/
    /*}*/
    .layui-input-block{
        /*margin-left: 40px;*/
    }
    .searchs{
        position: absolute;
        right: 200px;
    }
    .travel_list{
        height:200px;
        margin-left: 30px;
        margin-right: 30px;
        overflow-y: scroll;
    }

    .travel_tit{
        margin-left: 30px;
        margin-right: 30px;
    }
    .layui-table thead tr{
        background: #e6e6e6;
    }
    .page4-box{
        padding: 12px 16px;
    }
    .query-box{
        padding:20px 20px 10px 20px ;
        /*padding-top:20px;*/
        border: 1px solid #e6e6e6;
        min-height: 45px;
    }
    .selected_trip{
        border: 1px solid #e6e6e6;
    }
    .tripspan{
        margin-left: 40px;
        margin-right: 30px;
    }
    .tripspan span{
        line-height: 38px;
        background: #00a0e9;
        padding: 5px;
        border-radius: 10px;
        color: #fff;
    }
    .tag{
        float: left;
    }
    /*上一步下一步按钮居中*/
    .butcent{
        position: absolute;
        bottom: 20px;
        left: 40%;
        margin-left: 30%;
        width:20%;
        /*margin: 30px;*/
        padding: 30px;
    }

    .butcent2{
        margin-left: 70%;
        width:20%;
        padding: 30px;
    }

    .picturebut{
        /*background-color: #fbfdff;*/
        border: 1px solid #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        font-size:22px;
        width:48%;
        height: 100%;
        margin-top:-10%;
        margin-left:-8%;
        cursor: pointer;
        line-height: 300px;
        vertical-align: top;
    }
    .page3{
        margin-left: 16%;
        margin-top: 20%;
    }
    .layui-form-select .layui-edge{
        display: none;
        right: 0;
    }
    th{
        text-align: left;
    }
    .layui-input{
        border-radius: 5px;
    }

</style>
<body>

<!--客户信息的弹窗的内容数据-->
<div>
    <form class="layui-form " id="customer" action="">
        <input name="tripids" id="tripids" type="hidden" value="">
        <input name="productids" id="productids" type="hidden" value="">
        <div class="page1">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>行程信息</legend>
            </fieldset>
            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label"><span style="color: red">*</span>方案名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" style="width:500px;">
                    </div>
                </div>
            </div>
            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label"><span style="color: red">*</span>天数</label>
                    <div class="layui-input-inline" style="position: relative">
                        <input id="days" name="days" lay-verify="required" value="{notempty name='$menu'}{$menu.sale_starttime}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input"  type="number" min="1">
                    </div>
                </div>
            </div>
            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label"><span style="color: red">*</span>出行日期</label>
                    <div class="layui-input-inline" style="position: relative">
                        <input id="start_go_time" name="start_go_time"  lay-verify="required" id="start_go_time" value="{notempty name='$menu'}{$menu.sale_starttime}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出行人数</label>
                <div class="layui-input-inline" style="width: 90px">
                    <input type="number" name="adult"  lay-verify="required" autocomplete="off" class="layui-input"  value="1">
                </div>
                <div class="layui-form-mid layui-word-aux">成人&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div class="layui-input-inline" style="width: 90px">
                    <input type="number" name="child"  lay-verify="required" autocomplete="off" class="layui-input" value="0" >
                </div>
                <div class="layui-form-mid layui-word-aux">儿童</div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发城市</label>
                <div class="layui-input-inline">
                    <select name="start_city" lay-verify="start_city" lay-search >
                        <option value="">请选择</option>
                        {volist name="city" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">目的地城市</label>
                <div class="layui-input-inline">
                    <select name="end_city" lay-verify="end_city" lay-search>
                        <option value="">请选择</option>
                        {volist name="city" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车型选择</label>
                <div class="layui-input-inline">
                    <select name="carType" id="carType" lay-filter="carType" lay-search>
                        <option value="1">5座</option>
                        <option value="10">7座</option>
                        <option value="15">8座</option>
                        <option value="20">12座</option>
                        <option value="30">15座</option>
                        <!--<option value="40">20座以上</option>-->
                    </select>
                </div>
            </div>
        </div>
        <div class="page2" hidden>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>客户信息</legend>
                <p style="color: red;margin-left: 40px;margin-top: 16px">客户信息如没有可为空,直接提交</p>
            </fieldset>
            <div class="layui-form-item">

                <label class="layui-form-label" >客户姓名</label>
                <div class="layui-input-inline">
                    <input name="nickname" value="{notempty name='$menu'}{$menu.nickname}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input"  type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input name="phone" value="{notempty name='$menu'}{$menu.phone}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input"  type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">微信</label>
                <div class="layui-input-inline">
                    <input name="wechat" value="{notempty name='$menu'}{$menu.wechat}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input"  type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input name="email" value="{notempty name='$menu'}{$menu.email}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input"  type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline">
                    <input name="age" value="{notempty name='$menu'}{$menu.age}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input"  type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">来源平台</label>
                <div class="layui-input-inline">
                    <!--<input name="source" value="{notempty name='$menu'}{$menu.source}{/notempty}" placeholder="请输入" autocomplete="off" class="layui-input"  type="text">-->
                    <select name="source" id="source" class="layui-select custom-input" lay-search="">
                        <option value="">请选择来源</option>
                        {volist name='originList' id='value'}
                        <option value="{$key}">{$value}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性质</label>
                <input type="radio" name="type" value="person" title="个人" >
                <input type="radio" name="type" value="team" title="团体" >
            </div>
        </div>
    </form>

    <div class="layui-form-item">
        <div class="container">
            <div class="page1 butcent">
                <button class="layui-btn"  lay-filter="" id="next">下一步</button>
            </div>

            <div class="page2 butcent" hidden>
                <button class="layui-btn"  lay-filter="" id="prev">上一步</button>
                <button class="layui-btn"  lay-filter="" id="importtip">下一步</button>
            </div>
            <div class="page3" hidden>
                <div>
                    <button class="layui-btn picturebut" id="toimport">导入模板</button>
                    <button class="layui-btn picturebut" lay-submit lay-filter="customer">新建定制</button>
                </div>
                <div class="layui-form-item butcent">
                    <button class="layui-btn page6" lay-filter="">上一步</button>
                </div>
            </div>
            <div class="page4 " hidden>
              <div class="page4-box">
                <div class="layui-form-item query-box">
                    <form class="layui-form" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="padding: 4px 4px;height: 38px;line-height: 30px " >关键字：</label>
                            <input type="text" class="ms-choice keywords layui-input" id="keywords"  placeholder="请输入" style="width: 200px;" autocomplete="off">
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="padding: 4px 4px;height: 38px;line-height: 30px">城市：</label>
                            <div class="tag" id="tag_ids2">
                            </div>
                        </div>
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal layui-btn-xs" id="querypoi" style="float: right;margin-right: 27px">查询</button>
                        </div>
                    </form>
                 </div>
                  <div class="selected_trip">
                      <div class="layui-form-item">
                          <label class="layui-form-label ">已选行程:</label>
                          <div class="layui-inline tripspan">

                          </div>
                      </div>
                      <!--表格-->
                      <div class="travel_tit">
                          <table>
                              <colgroup>
                                  <col width="300">
                                  <col width="150">
                                  <col width="150">
                                  <col width="150">
                                  <col width="70">

                              </colgroup>
                              <thead>
                                <tr>
                                  <th>案例名称</th>
                                  <th>案例ID</th>
                                  <th>案例天数</th>
                                  <th>案例人数</th>
                                  <th width="30px">操作</th>
                                  </tr>
                              </thead>
                          </table>
                      </div>
                      <div class="travel_list">
                          <table class="layui-table" lay-size="sm" lay-filter="dataTable" id="layui_table_id">
                              <colgroup>
                                  <col width="300">
                                  <col width="150">
                                  <col width="150">
                                  <col width="150">
                                  <col width="70">
                              </colgroup>
                              <tbody class="tbodyclass">
                                  <tr >

                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>

               </div>
                <div class="butcent2">
                    <button class="layui-btn page5"  lay-filter="">上一步</button>
                    <button class="layui-btn"  lay-filter="" id="importType"> 提交</button>
                </div>
            </div>
        </div>
    </div>

</div>


</body>

<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>

    var tagData = {$cityJson};

    layui.config({
        base : '__PUBLIC__/'
    }).extend({
        selectM: './multiple/selectM',
    }).use(['layer','form','jquery','selectM','laydate','table'],function(){
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            selectM = layui.selectM,
            laydate = layui.laydate,
            table = layui.table;
            laydate.render({     //创建时间选择框
                elem: '#start_go_time' //指定元素
                ,format: 'yyyy-MM-dd'
                ,trigger:'click'
            });


        form.on('submit(customer)', function(data) {
            var name=$('#name').val()
            var days=$('#days').val()
            var start_go_time=$('#start_go_time').val()
            if(name !=='' && days !==''&& start_go_time !==''){
                $.ajax({
                    url:"{:url('/admin/quicktrip/info')}",
                    data:$('#customer').serialize(),
                    type:'post',
                    async: false,
                    success:function(res) {
                        var id = res.data;
                        parent.$("#tripid").attr("value",id);
                        layer.msg(res.msg);
                        if(res.code == 1) {
                            setTimeout(function(){
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            },1500)
                        }
                    }
                })

            }else{
                layer.msg('请补全行程信息')
            }
        });

        //多选标签-所有配置
        var tagIns2 = selectM({
            elem: '#tag_ids2' //元素容器【必填】
            ,data: tagData //候选数据【必填】
            ,selected: []      //默认值
            ,max : 5    //最多选中个数，默认5
            ,name: 'tag2'  //input的name 不设置与选择器相同(去#.)
            ,delimiter: ','    //值的分隔符
            ,field: {idName:'id',titleName:'name'}   //候选项数据的键名
        });

        //查询按钮
        $("#querypoi").click(function(){
            var title= $('#keywords').val() ;//input关键字
            var citys=$("input[name='tag2']").attr("value");

            $.ajax({
                url:"{:url('admin/quicktrip/getTripForImport')}",
                data:{title:title,citys:citys},
                type:'post',
                async: false,
                success:function(res) {
                    //数据插入表格
                    var html='';
                    for(var i=0;i<res.length;i++){
                        html+='<tr><td>'+res[i]["name"]+'</td>'
                        html+='<td>'+res[i]["id"]+'</td>'
                        html+='<td>'+res[i]["days"]+'</td>'
                        html+='<td>'+res[i]["people"]+'</td>'
                        html+='<td><button class="layui-btn layui-btn-normal layui-btn-sm choosePoi" id="addtrips"  data-name="'+res[i]["name"]+'" data-tid="'+res[i]["use_type"]+'"  data-id="'+res[i]["id"]+'">选择</button></td></tr>'
                    }
                    $('.tbodyclass').html(html);
                    return false;
                }
            })
            return false;
        })

        //   添加行程按钮 addtrips
        $('body').on('click','#addtrips',function () {
            var tripid= $(this).attr("data-id");
            var use_type= $(this).attr("data-tid");
            var tripname= $(this).attr("data-name");
            var tripids;
            // 1产品 2定制
            if(use_type==1){
                tripids=$("#productids").val();
            }else{
                tripids=$("#tripids").val();
            }
            var ids=tripids.split(",");
            for(var i=0 ; i < ids.length; i++){
                if(tripid==ids[i]){
                    layer.msg("不能重复添加行程");
                    return false;
                }
            }
            var tripspan='<span class="deltripspan" data-id="'+tripid+'" data-tid="'+use_type+'" style="margin: 5px 10px">'+tripname+'<i class="layui-icon"></i></span>';

            if(!tripids){
                tripids+=tripid;
            }else{
                tripids+=','+tripid;
            }

            $(".tripspan").append(tripspan);
            if(use_type==1){
                $("#productids").val(tripids);
            }else{
                $("#tripids").val(tripids);
            }
        });

         //  导入模板的提交按钮
        $('#importType').click(function () {
            var name=$('#name').val()
            var days=$('#days').val()
            var start_go_time=$('#start_go_time').val()
            if(name !=='' && days !==''&& start_go_time !==''){
                $.ajax({
                    url:"{:url('/admin/quicktrip/importinfo')}",
                    data:$('#customer').serialize(),
                    type:'post',
                    async: false,
                    success:function(res) {
                        var id = res.data;
                        parent.$("#tripid").attr("value",id);
                        layer.msg(res.msg);
                        if(res.code == 1) {
                            setTimeout(function(){
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            },1500)
                        }
                    }
                })

            }else{
                layer.msg('请补全行程信息')
            }
        });

        //删除已选行程
        $('body').on('click','.deltripspan',function () {
            var dataid=$(this).attr("data-id");
            var use_type=$(this).attr("data-tid");
            var tripids;
            if(use_type==1){
                tripids=$("#productids").val();
            }else{
                tripids=$("#tripids").val();
            }
            var ids=tripids.split(",");
            var newid="";
            for(var i=0 ; i < ids.length; i++){
                if(ids[i]&&dataid!=ids[i]){
                    if(!newid){
                        newid+=ids[i];
                    }else{
                        newid+=","+ids[i];
                    }
                }
            }
            if(use_type==1){
                $("#productids").val(newid);
            }else{
                $("#tripids").val(newid);
            }
            $(this).remove();
        })

    });

//    绑定下一步按钮
    $('#next').click(function () {
        var name=$('#name').val()
        var days=$('#days').val()
        var start_go_time=$('#start_go_time').val()
        if(name !=='' && days !==''&& start_go_time !==''){
            $('.page1').hide();
            $('.page2').show();
        }else{
            layer.msg('请补全行程信息')
        }

    })
    $('#prev').click(function () {
        $('.page2').hide();
        $('.page1').show();
    })
    $('#importtip').click(function () {
        $('.page1').hide();
        $('.page2').hide();
        $('.page3').show();
    })
    $('#toimport').click(function () {
        $('.page1').hide();
        $('.page2').hide();
        $('.page3').hide();
        $('.page4').show();

    })
    $('.page5').click(function () {
        $('.page4').hide();
        $('.page3').show();
    })
    $('.page6').click(function () {
        $('.page3').hide();
        $('.page2').show();
    })

</script>
</html>